<script setup>
import { useCartStore } from '@/stores/cart.js'
import { orderPreview, subOrder } from '@/api/order.js'
import { onMounted } from 'vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import zfb from '@/assets/img/zfb.png'
import weixin from '@/assets/img/weixin.png'

defineOptions({ name: 'orderPreview' })
const router = useRouter()
const cartStore = useCartStore()
onMounted(async () => {
  const { address, carts } = await orderPreview()
  addressList.value = address.filter((value) => value.is_default)
  cartList.value = carts
})
const addressList = ref([])
const cartList = ref([])

const show = ref(false)
const onSubmit = async () => {
  orderDetail.value = await subOrder(addressList.value[0].id)
  console.log(orderDetail.value)

  show.value = true
}

const orderDetail = ref(false)

const action = ref([
  { name: '微信支付', img: weixin },
  { name: '支付宝支付', img: zfb }
])

const checked = ref('微信支付')
</script>

<template>
  <div>
    <shopNavbar :title="'订单预览'"></shopNavbar>
  </div>

  <van-cell class="cell" @click="$router.replace('/address')">
    <template #title>
      <div class="d-flex justify-content-between align-items-center">
        <template v-if="addressList.length">
          <div v-for="item in addressList" :key="item">
            <div class="mb-3">
              {{ item.phone }}
            </div>
            <div>
              {{
                `${item.province}  ${item.city}  ${item.county}  ${item.address}`
              }}
            </div>
          </div>
        </template>
        <h6 v-else>还没有设置默认地址哟，请选择或填写地址信息</h6>
        <van-icon name="arrow" size="large" />
      </div>
    </template>
  </van-cell>

  <van-card
    v-for="item in cartList"
    :key="item.id"
    :num="item.num"
    :title="item.goods.title"
    :thumb="item.goods.cover_url"
  >
    <template #price>
      <h5 class="text-danger">￥{{ item.goods.price }}</h5>
    </template>
  </van-card>

  <van-action-sheet
    @closed="router.replace(`/orderDetail/${orderDetail.id}`)"
    v-model:show="show"
    close-on-click-action
    title="请选择支付方式"
  >
    <template #default>
      <van-radio-group v-model="checked">
        <div
          v-for="(items, index) in action"
          :key="index"
          class="my-3 d-flex justify-content-between align-items-center mx-3"
        >
          <div>
            <img width="30" height="30" class="mx-3" :src="items.img" alt="" />
            <span>
              {{ items.name }}
            </span>
          </div>
          <van-radio :name="items.name"></van-radio>
        </div>
      </van-radio-group>
    </template>
    <template #cancel>
      <van-button
        block
        type="danger"
        @click="
          router.replace(
            `/pay/${orderDetail.id}/${checked === '微信支付' ? 'wechat' : 'aliyun'}`
          )
        "
      >
        使用 {{ checked }}（模拟）
      </van-button>
    </template>
  </van-action-sheet>

  <van-submit-bar
    :price="cartStore.totalPrice * 100"
    button-text="生成订单"
    @submit="onSubmit"
  >
    商品金额
  </van-submit-bar>
</template>

<style lang="scss" scoped>
.cell::after {
  content: '';
  height: 5px;
  position: absolute;
  bottom: 0;
  background: repeating-linear-gradient(
    315deg,
    var(--van-warning-color) 0,
    var(--van-warning-color) 2%,
    transparent 0,
    transparent 3%,
    var(--van-primary-color) 0,
    var(--van-primary-color) 4%,
    transparent 0,
    transparent 0%
  );
}
</style>
